<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img {
				width: 300px;
				height: 200px;
				border-radius: 50%;
				overflow: hidden;
			}

			table {
				border-collapse: collapse;
				margin-right: 20px;
			}

			td {
				padding: 10px;
				border-bottom: 1px solid #ddd;
				cursor: pointer;
			}

			/* 新增部分 */
			td:hover {
				background-color: #eee;
			}
		</style>
	</head>
	<body>

		<table>
			<tr>
				<td rowspan="5">
					<img src="images/tu.jpg" alt="">

				</td>
				<td colspan="2"><input type="text">
					<button onclick="search()">搜索</button>
				</td>

			</tr>
			<tr>
				<td onclick="search('中国国宝')">中国国宝</td>
				<td onclick="search('兵马俑')">兵马俑</td>
			</tr>
			<tr>
				<td onclick="search('川菜')">川菜</td>
				<td onclick="search('粤菜')">粤菜</td>
			</tr>
			<tr>
				<td onclick="search('新疆风情')">新疆风情</td>
				<td onclick="search('客家土楼')">客家土楼</td>
			</tr>
			<tr>
				<td onclick="search('民族乐器')">民族乐谱</td>
				<td onclick="search('青铜重器')">青铜重器</td>
			</tr>
		</table>

		<script>
			// 获取所有 td 元素
			var tds = document.querySelectorAll('td');

			// 循环遍历 td 元素
			for (var i = 0; i < tds.length; i++) {

				(function(name) {
					tds[i].addEventListener('mouseover', function() {

						show(name);
					});
				})(tds[i].textContent);
			}

			function show(name) {
				// 定义图片数组
				var imgs = [
					'images/' + name + '/1.jpg',
					'images/' + name + '/2.jpg',
					'images/' + name + '/3.jpg',
					'images/' + name + '/4.jpg',
					'images/' + name + '/5.jpg',
					'images/' + name + '/6.jpg',
					'images/' + name + '/7.jpg'
				];
				// 获取图片元素
				var img = document.querySelector('img');
				// 设置默认图片
				img.src = "images/tu.jpg";
				// 定义图片索引
				var index = 0;
				// 定时器循环显示图片
				setInterval(function() {
					img.src = imgs[index];
					index = (index + 1) % imgs.length;
				}, 2000);
			}


			// 搜索函数，跳转到百度图库搜索
			function search(keyword) {
				var url = 'https://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + encodeURIComponent(keyword);
				window.location.href = url;
			}
		</script>


	</body>

</html>
